<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        // 需求1:点击返回顶部，滚动条自动滚动返回顶部，到顶部停止滚动。
        var time;
        window.onload = function(){
            var btn = document.getElementById('btn');
            var btn1 = document.getElementById('btn1');
            btn.onclick = function(){
                // 1.设置了一个定时器，让页面自动往上滚。
                time = setInterval(function(){
                    // 2.设置浏览器卷去的高度，每次减20px。
                    document.documentElement.scrollTop -= 20;
                    if(document.documentElement.scrollTop <= 0){
                        // 3.当滚动条距离顶部的高度小于0，清除计时器。
                        clearInterval(time);
                    }
                },50);
            }
            btn1.onclick = function(){
                // 1.设置了一个定时器，让页面自动往上滚。
               console.log(document.documentElement.scrollHeight);
                time = setInterval(function(){
                    // 2.设置浏览器卷去的高度，每次减20px。
                     
                    document.documentElement.scrollTop += 20;
                    if(document.documentElement.scrollTop >= 927){
                        // 3.当滚动条距离顶部的高度小于0，清除计时器。
                        clearInterval(time);
                    }
                },50);
            }
        }

        // 需求2：当用户反方向滚动页面，停止自动滚动
        // var res = 0;
        // window.onscroll = function(){
        //     if(res <= document.documentElement.scrollTop){
        //         clearInterval(time);
        //     }
        //     // 记录上一次的位置
        //     res = document.documentElement.scrollTop;
        // }



    </script>
    <button id="btn1">返回底部</button>
    <p>我是页面中的内容，我很多很多</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>我是页面中的内容，我很多很多</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>我是页面中的内容，我很多很多</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>我是页面中的内容，我很多很多</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>我是页面中的内容，我很多很多</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>我是页面中的内容，我很多很多</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>我是页面中的内容，我很多很多</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br><p>我是页面中的内容，我很多很多</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br> 
    <button id="btn">返回顶部</button>
</body>
</html>